<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>课程分析管理</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="/css/popup.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.search_img {
			margin: 5px 10px 0 0;
		}

		.filter-container {
			display: inline-block;
			flex-wrap: wrap;
			/* 允许换行 */
			gap: 10px;
			/* 输入框之间的间距 */
			/* max-width: 800px; */
			/* 设置最大宽度，可以根据需要调整 */
		}



		.table {
			width: 100%;
			margin-left: 0;
		}

		.five {
			max-height: 55px !important;
			min-width: 130px !important;
			padding: 0;
		}

		.three {
			min-width: 100px;
			width: 9%;
		}

		.phone {
			color: blue;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}

		.nickname {
			position: absolute;
			left: 40px;
			bottom: calc((100% - 35px) / 2);
			width: 80px;
			text-align: left;
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.untying {
			position: absolute;
			right: 0;
			bottom: 0;
			display: inline-block;
			font-size: 12px;
			cursor: pointer;
			color: #9F9F9F;
		}

		.img-box {
			width: 35px;
			height: 35px;
			display: inline-block;
			padding: 0;
		}

		.phone {
			display: inline-block;
		}

		.header {
			width: 35px;
			height: 35px;
			position: absolute;
			left: 3px;
			bottom: calc((100% - 35px) / 2);
			display: inline-block;
			border-radius: 50%;
		}

		.choose-class {
			width: 94%;
			height: 35px;
			margin-left: 3%;
			margin-top: 35px;
		}

		.popup {
			width: 330px;
			height: 300px;
			/* margin: calc((100% - 300px) / 6) calc((100% - 300px) / 2); */
		}

		.popup-title {
			padding-left: 100px;
		}

		.relatives-info {
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			vertical-align: text-top;
			text-align: left;
		}

		.relatives-name {
			text-indent: 1em;
			width: calc(100% - 13em);
		}

		.relatives-relation {
			width: 5em;
		}

		.info2 {
			margin-top: 0.5em;
			vertical-align: text-top;
		}

		.relatives_info {
			width: 3.5em;
			display: inline-block;
			vertical-align: text-top;
		}

		.relatives_info img {
			height: 3.5em;
			width: 100%;
			border-radius: 50%;
			margin: 0 0.25em;
		}

		.uihf {
			display: flex;
			flex-wrap: wrap;

		}

		.other {
			height: 33px;
			border: 1px solid #7a7a7a;
		}


		.search {
			position: relative;
			right: 0px;
			margin: 5px 10px 0 0;
		}

		.enroll-button {
			display: inline-block;
			padding: 10px 20px;
			background-color: #69bbf4;
			/* 绿色背景 */
			color: white;
			/* 字体颜色为白色 */
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			border-radius: 5px;
			/* 圆角效果 */
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
			/* 阴影效果 */
			transition: background-color 0.3s ease;
			/* 鼠标悬停时的平滑过渡 */
		}

		.enroll-button:hover {
			background-color: #c52626;
			/* 悬停时更深的绿色 */
		}

		.total-amount {
			font-weight: bold;
			color: #c52626;
			/* 红色字体 */
			margin-left: 10px;
			font-size: 20px;
		}

		[v-if] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">

		<div class="filter-container">
			<div class="refresh" onclick="location.reload()">刷新</div>
			<div class="uihf">


				<select class="search" v-model="search.courseId">
					<option :value="undefined">请选择课程</option>
					<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
					</option>
				</select>

				<select class="search" v-model="search.type">
					<option :value="undefined">请选择报读模式</option>
					<option value="1">按课时收费</option>
					<option value="2">月收费</option>
					<option value="3">天收费</option>
					<option value="4">按季收费</option>
					<option value="5">按期收费</option>
					<option value="6">按课包收费</option>
					<option value="7">按体验收费</option>
				</select>
				<select class="search" v-model="search.orderType">
					<option :value="undefined">请选择类型</option>
					<option value="1">新签</option>
					<option value="2">续费</option>
					<option value="3">新签尾款</option>
				</select>

				<select class="search" v-model="search.studentStatus">
					<option :value="undefined">请选择状态</option>
					<option value="退费">退费</option>
					<option value="请假">请假</option>
					<option value="停课">停课</option>
					<option value="在读">在读</option>
					<option value="过期">过期</option>
					<option value="课程暂未开始">课程暂未开始</option>
				</select>
				<select class="search" v-model="search.gift">
					<option :value="undefined">请选择赠送课程</option>
					<option value="true">赠送课程</option>
					<option value="false">非赠送课程</option>
				</select>


				<input placeholder="请输入学员姓名" class="search" v-model="search.name">

				<v-select class="search666" v-model="search.performance" :options="promoters" label="name" :reduce="promoter => promoter.id"
					placeholder="请选择申请人" :filterable="true" :clearable="true"  
				  ></v-select>
				<!-- <select class="search" v-model="search.performance">
					<option :value="undefined">请选择签单人</option>
					<option v-for="promoter in promoters" :key="promoter.id" :value="promoter.id"
						v-text="promoter.name">
					</option>
				</select> -->

				<input placeholder="订单建立起" class="search" id="orderCreateStartTime"
					v-model="search.orderCreateStartTime" />
				<input placeholder="订单建立止" class="search" id="orderCreateEndTime" v-model="search.orderCreateEndTime" />

				<input placeholder="课程结束起" class="search" id="startTime" v-model="search.startTime"
					style="font-size: 15px; width: 130px;" />
				<input placeholder="课程结束止" class="search" id="endTime" v-model="search.endTime"
					style="font-size: 15px;width: 130px;" />
				<img src="../image/search.png" height="35px" width="35" class="search_img" @click="getData0" />
			</div>
		</div>
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>
		<div class="table " style="margin-left: 2%;width: 96%; overflow: auto;">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th class="one">序号</th>
						<th class="one">学员姓名</th>
						<th class="one">报读课程</th>
						<th class="one">报读模式</th>
						<th class="one">收款日期</th>
						<th>课程开始时间</th>
						<th class="one">结束时间</th>
						<th class="one">状态</th>
						<th class="one">类型</th>
						<th class="one">金额</th>
						<th class="one">签单人</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(student,index) in list" :key="student.id">
						<td>
							<input type="checkbox" class="check-box" v-model="student.checked">
						</td>
						<td class="one"><span v-text="index+1"></span></td>
						<td class="one" v-text="student.studentName"></td>
						<td class="one" v-text="student.courseName"></td>
						<td class="one" v-text="getTypeName(student.type)"></td>
						<td class="one" v-text="student.handlingDate"></td>
						<td class="one" v-text="student.startTime"></td>
						<td class="one" v-text="student.endTime"></td>
						<td class="one" v-text="student.studentStatus"></td>
						<td class="one" v-text="student.orderType === 1 
              ? '新签' 
              : student.orderType === 2 
                ? '续费' 
                : student.orderType === 3 
                  ? '新签尾款' 
                  : '未知类型'">
						</td>

						<td class="one" v-text="student.amount/100"></td>
						<td class="one" v-text="student.performanceName"></td>

					</tr>
					<tr></tr>
				</tbody>
			</table>
		</div>
		<br>
		<span class="total-amount">汇总金额：￥{{ totalAmount }}</span>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
			<li>
				<a v-text="pages"></a>
			</li>
		</ul>
		<div style="float: right;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>
		<!--遮罩层-->
		<div v-if="popup">
			<div class="model-table5">
				<div class="popup">
					<div class="popup-title">修改班级</div>
					<div class="popup-center">
						<v-select placeholder="请选择班级" label="name" :options="classess" :reduce="item=>item.id"
							v-model="toClassesId"></v-select>
						<button class="sure" @click="sure">确定</button>
						<button class="back" @click="popup=false">取消</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>


	<script>
		var agentId = localStorage.getItem('agentId')
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				schools: [],
				promoters: [],
				peoples: [],
				courses: [],
				dataSource: null,
				dataStatus: null,
				dataIntent: null,
				selectedDataSourceIndex: null, // 添加这里
				selectedDataStatusIndex: null,   // 添加这里
				selectedDataIntentIndex: null,    // 添加这里
				urls: {
					del: '/pc/student/del'
				},
				popup: false,
				toClassesId: null,
				boundShow: false,
				shownStudent: null,
				totalAmount: 0,
			},
			created: function () {
				var id = top_params().id;
				if (!id) return;
				this.schoolId = id
				this.urls.list = '/pc/student/curriculumAnalysis?schoolId=' + this.schoolId;
				this.fetchTotalAmount();
				this.urls.imports = '/pc/student/import/' + this.agentId;
				this.getData();
				abled('courseData', this)


				axios.get('/pc/category/' + agentId).then(function (res) {
					this.dataSource = res.data.dataSource;
					this.dataStatus = res.data.dataStatus;
					this.dataIntent = res.data.dataIntent;
				}.bind(this));
				axios.get('/pc/staffUser/all/' + agentId).then(function (res) {
					this.promoters = res.data;
					this.peoples = res.data;
				}.bind(this));

				axios.get('/pc/course/all/' + agentId).then(function (res) {
					this.courses = res.data
				}.bind(this));

			},

			methods: {
				getTypeName(type) {
					const typeMap = {
						1: '按课时收费',
						2: '月收费',
						3: '天收费',
						4: '按季收费',
						5: '按期收费',
						6: '按课包收费',
						7: '按体验收费',
					};
					return typeMap[type] || '未知类型'; // 默认显示“未知类型”，如果type不是1-7
				},
				getData0() {
					this.urls.list = '/pc/student/curriculumAnalysis?schoolId=' + top_params().id;
					// 获取数据的逻辑
					this.fetchTotalAmount(); // 调用获取总金额的接口
					this.getData();
				},
				fetchTotalAmount() {
					// 调用后台接口，获取汇总金额
					axios.get('/pc/student/countByCourses?schoolId=' + top_params().id, { params: this.search }).then(function (res) {

						this.totalAmount = res.data / 100;
					}.bind(this));
				},

				exports: function () {
					var q = Qs.stringify(this.search);
					if (q) q = '?' + q;
					location.href = '/pc/student/export/' + this.agentId + q;
				},
				unbind: function (student, type) {
					if (!confirm('确定解除此绑定吗？')) return;
					axios.post('/pc/student/unbind/' + student.id + '/' + type).then(function (res) {
						student.accounts.splice(type, 1, null);
					});
				},
				getImg: function (pic) {
					if (!pic) return null;
					return '/static/' + this.schoolId + '/student/' + pic;
				},
				account: function (student, type, field) {
					var account = student.accounts[type];
					if (!account) return null;
					return account[field];
				},
				bindCount: function (student) {
					return student.accounts.filter(function (it) {
						return it;
					}).length;
				},
				bindClick: function (student) {
					this.shownStudent = student;
					this.boundShow = true;
				},
				nickname: function (student, type) {
					return this.account(student, type, 'nickname');
				},
				headimgurl: function (student, type) {
					var headimgurl = this.account(student, type, 'headimgurl');
					if (headimgurl) headimgurl = headimgurl.replace('http://', 'https://');
					return headimgurl;
				},
				phone: function (student, type) {
					return this.account(student, type, 'phone');
				},
				avatar: function (student, type) {
					var pic = this.account(student, type, 'avatar');
					if (!pic) return null;
					return '/static/' + this.schoolId + '/binding/' + pic;
				},
				changeClasses: function () {
					if (this.checkedIds.length === 0) {
						alert('请选择至少1个');
						return;
					}
					this.popup = true;
				},
				sure: function () {
					if (!this.toClassesId) {
						alert('请选择班级');
						return;
					}

					axios.put('/pc/student/classes/' + this.toClassesId, this.checkedIds).then(function (res) {
						this.getData();
						this.popup = false;
						alert('成功');
					}.bind(this));
				}
			},
			watch: {
				selectedDataSourceIndex: function (e) {

					var data = this.dataSource.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataSource = data[0]

				},
				selectedDataStatusIndex: function (e) {

					var data = this.dataStatus.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataStatus = data[0]

				},
				selectedDataIntentIndex: function (e) {

					var data = this.dataIntent.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataIntent = data[0]

				}
			}

		}));
		["orderCreateStartTime", "orderCreateEndTime"].forEach(function (it) {
			laydate.render({
				elem: "#" + it,
				type: "datetime",
				done: function (value, date, endDate) {
					app.search[it] = value;
				},
			});
		});
		["startTime", "endTime"].forEach(function (it) {
			laydate.render({
				elem: "#" + it,
				type: "month",
				done: function (value, date, endDate) {
					app.search[it] = value;
				},
			});
		});
	</script>

</body>

</html>